<!DOCTYPE html>
<html>
<head>
  <title>Vue.js github commits example</title>
  <style>
    #demo {
      font-family: 'Helvetica', Arial, sans-serif;
    }

    a {
      text-decoration: none;
      color: #f66;
    }

    li {
      line-height: 1.5em;
      margin-bottom: 20px;
    }

    .author, .date {
      font-weight: bold;
    }
  </style>
  <!-- Delete ".min" for console warnings in development -->
  <script src="../../dist/vue.min.js"></script>
</head>
<body>
<div id="demo">
  <h1>Latest Vue.js Commits</h1>
  <template v-for="branch in branches">
    <input type="radio"
           :id="branch"
           :value="branch"
           name="branch"
           v-model="currentBranch">
    <label :for="branch">{{ branch }}</label>
  </template>
  <p>vuejs/vue@{{ currentBranch }}</p>
  <ul>
    <li v-for="record in commits">
      <a :href="record.html_url" target="_blank" class="commit">{{ record.sha.slice(0, 7) }}</a>
      - <span class="message">{{ record.commit.message | truncate }}</span><br>
      by <span class="author"><a :href="record.author.html_url"
                                 target="_blank">{{ record.commit.author.name }}</a></span>
      at <span class="date">{{ record.commit.author.date | formatDate }}</span>
    </li>
  </ul>
</div>
<script src="mock.js"></script>
<script src="app.js"></script>
</body>
</html>
